<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue之监视属性和计算属性的比较</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    姓:<input type="text" v-model="firstName">
    名:<input type="text" v-model="lastName">
    姓名:{{name}}
</div>
</body>
<!--
    computed和watch之前的区别
        1.computed能完成的功能，watch都可以完成。
        2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。
    两个重要的小原则:
        1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
        2,所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头雨数，这样this的指向才是vm或组件实例对象。
-->

<script>

    Vue.config.productionTip = false;
    new Vue({
        el: '#app',
        data: {
            firstName: '郭',
            lastName: "富城",
            name: "",
        },
        watch: {
            firstName(){
                setTimeout(() => {
                    this.name = this.firstName + "-" + this.lastName;
                },5000)
            },
            lastName(){
                this.name = this.firstName + "-" + this.lastName;
            }
        }
    })
</script>
</html>